<template>
  <FullscreenCard class="wrapper">
    <div class="grid-wrapper">
      <div class="grid" style="width: 100px;" :ref="setDomRef"/>
      <div
        v-for="item in dataList"
        :key="item.id"
        class="grid"
        :style="{width: `calc((100% - 100px) / ${dataList.length})`}" 
        :ref="setDomRef"
      />
    </div>
		
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import FullscreenCard from '@/components/FullscreenCard'

const charDom = ref<any>([])
const setDomRef = (el:any) => charDom.value.push(el)

const dataList = [{
  id: '1',
  name: '密度',
  data: [
    [0.5, 500],
    [0.6, 900],
    [0.4, 1100],
    [0.7, 1300],
    [1.5, 2200],
  ]
}, {
  id: '2',
  name: '漏斗',
  data: [
    [0.5, 600],
    [0.6, 1000],
    [0.4, 1200],
    [0.7, 1400],
    [1.5, 1600],
    [1.8, 2400],
  ]
}, {
  id: '3',
  name: '初切',
  data: [
    [0.5, 400],
    [0.6, 800],
    [0.4, 1000],
    [0.7, 1200],
    [1.5, 1400],
    [0.8, 2000],
  ]
}, {
  id: '4',
  name: '终切',
  data: [
    [0.5, 300],
    [0.6, 700],
    [0.4, 1300],
    [0.7, 1500],
    [1.5, 1700],
    [0.8, 2600],
  ]
}, {
  id: '5',
  name: '塑性',
  data: [
    [0.5, 100],
    [0.6, 400],
    [0.4, 600],
    [0.7, 1100],
    [1.5, 1200],
    [0.8, 2100],
  ]
}]
const initChart = () => {
  const myChart = echarts.init(charDom.value[0])
  const option =  {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      show: false,
      name: dataList[0]?.name,
      type: 'value',
      boundaryGap: false,
      // 分割线
      splitLine: { show: false },
      // 坐标轴线
      axisLine: { show: false },
      // 刻度线
      axisTick: { show: false },
    },
    yAxis: {
      show: true,
      name: '井深/m',
      type: 'value',
      offset: -80,
      inverse: true,
      min: 0,
      interval: 400,
      axisLabel: {
        formatter: '{value}'
      },
      // 分割线
      splitLine: { 
        show: true,
        lineStyle: {
          type: 'dashed' 
        }
      },
      // 坐标轴线
      axisLine: { show: true },
      // 刻度线
      axisTick: { show: false },
    },
    series: [],
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

const initChartItem = (v:any, i:number) => {
  const myChart = echarts.init(charDom.value[i+1])
  const option =  {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: 0,
      right: 0,
    },
    xAxis: {
      show: false,
      name: v.name,
      type: 'value',
      boundaryGap: false,
      // 分割线
      splitLine: { show: false },
      // 坐标轴线
      axisLine: { show: false },
      // 刻度线
      axisTick: { show: false },
      // data: dataList.map(v => ({
      //   value: v.name,
      //   textStyle: {
      //     align: 'center'
      //   }
      // }))
    },
    yAxis: {
      show: true,
      type: 'value',
      offset: 0,
      inverse: true,
      min: 0,
      interval: 400,
      axisLabel: {
        formatter: '{value}'
      },
      // 分割线
      splitLine: { 
        show: true,
        lineStyle: {
          type: 'dashed' 
        }
      },
      // 坐标轴线
      axisLine: { show: false },
      // 刻度线
      axisTick: { show: false },
    },
    series: [
      {
        name: v.name,
        type: 'line',
        data: v.data,
      }
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
onMounted(() => {
  initChart()
  dataList.map((v, i) => {
    initChartItem(v, i)
  })
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  height: 100%;
}
.grid-wrapper {
  display: flex;
  height: 100%;
}
</style>
